<template>
  <vueWaterfallEasy :imgsArr="imgsArr" @scrollReachBottom="getData" ref="waterfall" style="height: 13.5rem" :maxCols="1">
    <div class="img-info shop_container" slot-scope="props">
      <ul class="shop_list some-info" v-for="(shops , gavin) in imgsArr" :key="gavin">
        <li class="shop_li border-1px"  v-for="(shop , index) in shops" :key="index">
          <router-link :to="{path: '/commodity',query: {
            index: props.value[index].index,                          //每个商家的ID号
            name: props.value[index].name,                            //商家名称
            image_path: props.value[index].image_path,                //商家头像
            promotion_info: props.value[index].promotion_info,        //商家说明
            rating: props.value[index].rating,                        //商家评分
            recent_order_num: props.value[index].recent_order_num,    //商家月销量
            float_delivery_fee: props.value[index].float_delivery_fee,//配送费
            float_minimum_order_amount: props.value[index].float_minimum_order_amount//多少金额起送
          }}">
            <div class="shop_left">
              <!--商家图片-->
              <img class="shop_img" v-lazy="props.value[index].image_path">
            </div>
            <div class="shop_right">
              <section class="shop_detail_header">
                <!--商家名称-->
                <h4 class="shop_title ellipsis">{{props.value[index].name}}</h4>
                <ul class="shop_detail_ul">
                  <!--'保 准 票' ，三个数据-->
                  <li class="supports" v-for="(support,i) in props.value[index].supports" :key="i">{{props.value[index].icon_name}}</li>
                </ul>
              </section>
              <section class="shop_rating_order">
                <section class="shop_rating_order_left">
                  <!--评分星星-->
                  <Star :star="props.value[index].rating" :size="24"  />
                  <div class="rating_section">
                    <!--评分-->
                    {{props.value[index].rating}}
                  </div>
                  <div class="order_section">
                    <!--订单-->
                    月售{{props.value[index].recent_order_num}}单
                  </div>
                </section>
                <section class="shop_rating_order_right">
                  <span class="delivery_style delivery_right">超人专送</span>
                </section>
              </section>
              <section class="shop_distance">
                <p class="shop_delivery_msg">
                  <!--多少元起送-->
                  <span>¥{{props.value[index].float_minimum_order_amount}}起送</span>
                  <span class="segmentation">/</span>
                  <!--配送费-->
                  <span>配送费约¥{{props.value[index].float_delivery_fee}}</span>
                </p>
              </section>
            </div>
          </router-link>
        </li>
      </ul>
    </div>

    <div slot="waterfall-over">主人，已经加载完啦！</div>
    <!--不显示商家时，显示该图片-->
    <!--<ul v-else>
      <li v-for="i in 5" :key="i">
        <img src="./images/shop_back.svg" />
      </li>
    </ul>-->
  </vueWaterfallEasy>
</template>

<script>
  import {mapState} from 'vuex'
  import Star from '../Star/Star.vue'  //引入评论'星星'
  import vueWaterfallEasy from 'vue-waterfall-easy';   //引入瀑布流插件

  export default {
    data(){
      return {
        imgBaseUrl: 'http://cangdu.org:8001/img/',
        imgsArr: [],      //瀑布流数据处理
        num: 0,           //数据的下标
      }
    },
    mounted(){
      this.$store.dispatch('getCategory')
      this.getData();
    },
    computed: {
      ...mapState(['shopsImg']),
    },
    components:{
      Star,
      vueWaterfallEasy
    },
    methods:{
      //瀑布流加载数据展示
      getData (){
        setTimeout(() => {
          if(this.shopsImg[this.num] !== undefined){
            this.imgsArr.push(this.shopsImg[this.num].name);
            this.num++;
          }else{
            this.$refs.waterfall.waterfallOver()
          }
        },1000)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import '../../common/stylus/minxins.styl';
  .shop_container
    margin-bottom 1.875rem
    overflow hidden
    .shop_list
      .shop_li
        bottom-border-1px(#f1f1f1)
        width 100%
        >a
          clearFix()
          display block
          box-sizing border-box
          padding .563rem .3rem
          width 100%
          .shop_left
            float left
            box-sizing border-box
            width 23%
            height 2.813rem
            padding-right .375rem
            .shop_img
              display block
              width 100%
              height 100%
          .shop_right
            float right
            width 77%
            .shop_detail_header
              clearFix()
              width 100%
              .shop_title
                float left
                width 7.5rem
                color #333
                font-size .6rem
                line-height .6rem
                font-weight 700
                &::before
                  content '品牌'
                  display inline-block
                  font-size .412rem
                  line-height .412rem
                  color #333
                  background-color #ffd930
                  padding .075rem .075rem
                  border-radius .075rem
                  margin-right .188rem
              .shop_detail_ul
                float right
                margin-top .122rem
                .supports
                  float left
                  font-size .375rem
                  color #999
                  border .0375rem solid #f1f1f1
                  padding 0 .075rem
                  border-radius 2px
            .shop_rating_order
              clearFix()
              width 100%
              margin-top .637rem
              margin-bottom .3rem
              .shop_rating_order_left
                float left
                color #ff9a0d
                .rating_section
                  float left
                  font-size .375rem
                  color #ff6000
                  margin-left .15rem
                .order_section
                  float left
                  font-size .375rem
                  color #666
                  transform scale(.8)
              .shop_rating_order_right
                float right
                font-size 0
                .delivery_style
                  transform-origin 35px 0
                  transform scale(.7)
                  display inline-block
                  font-size .45rem
                  padding .0375rem
                  border-radius .075rem
                .delivery_left
                  color #fff
                  margin-right -.375rem
                  background-color #02a774
                  border 1px solid #02a774
                .delivery_right
                  color #02a774
                  border .0375rem solid #02a774
            .shop_distance
              clearFix()
              width 100%
              font-size .45rem
              .shop_delivery_msg
                float left
                transform-origin 0
                transform scale(.9)
                color #666
              .segmentation
                color #ccc
  p
    font-size 0.525rem
</style>
